<template>
  <div class="main">
    <a-tabs
      :activeKey="customActiveKey"
      :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
      @change="handleTabClick"
    >
      <a-tab-pane key="tab1" tab="账号密码登录">
        <account-login :login-type="1"></account-login>
      </a-tab-pane>
      <a-tab-pane key="tab2" tab="手机号登录">
        <account-login :login-type="2"></account-login>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import {ref, reactive, toRefs } from 'vue'
// import { useStore } from 'vuex'
import AccountLogin from './components/Account'

// import { Tabs } from 'ant-design-vue'

export default {
  components: {
    // [Tabs.name]: Tabs,
    AccountLogin
  },
  setup() {
    const loginData = reactive({
      customActiveKey: ref('tab1')
    })

    // const store = useStore()

    const handleTabClick = (key) => {
      loginData.customActiveKey = key
    }

    return {
      ...toRefs(loginData),
      handleTabClick
    }
  }
}
</script>

<style lang="less" scoped>

</style>